<template>
  <div class="box">
    <btnGroup
      @click-flush="flush()"
      @click-add="changeInfo($event, undefined as any)"
      @click-delete="clickDelete(multipleSelection)"
      :dis-delete="!multipleSelection.length"
    ></btnGroup>

    <inpSearch
      v-model:input-search="inputSearch"
      @search="search"
      placeholder="查找用户名、姓名"
    ></inpSearch>

    <el-table
      :data="tableData"
      table-layout="auto"
      style="width: 100%; overflow: auto; flex: 1"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column
        v-for="(item, index) in key"
        :fixed="index <= 1"
        :prop="item"
        :label="keyNameList[item]"
        :min-width="index ? '150px' : '0px'"
        :align="'center'"
        style="background: #fff"
      >
        <template #default="{ row }" v-if="!index">
          <el-image
            size="small"
            fit="cover"
            :src="row.headImg"
            preview-teleported
            :preview-src-list="[row.headImg]"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            @click="changeInfo($event, row)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="clickDelete([row])"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <myPager :total="total" v-model:page="page" :page-size="10" @change-page="getUserList"></myPager>
  </div>

  <addUserDia
    v-model:showDig="showDig"
    @reflesh="getUserList"
    :user-info="userInfo"
  ></addUserDia>

  <!-- 弹出同意取消框 -->
  <el-dialog
    v-model="centerDialogVisible"
    title="提示"
    width="30%"
    align-center
  >
    <span>您确定删除该成员</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteUser()"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import { getUserListApi, deleteUserApi } from "@/api"
import addUserDia from "@/components/addUserDia.vue"

// 吐司方法
import { ElMessage } from "element-plus"

// 引入按钮分组组件
import btnGroup from "@/components/btnGroup.vue"
// 引入搜索框组件
import inpSearch from "@/components/inpSearch.vue"
// 引入分页组件
import myPager from "@/components/myPager.vue"

// 同意取消框
const centerDialogVisible = ref(false)

// 列名-列显示名 映射表
const keyNameList: any = reactive({
  headImg: "头像",
  username: "用户名",
  name: "姓名",
  nickName: "昵称",
  departmentName: "部门名",
  roleName: "角色",
  status: "状态",
  email: "邮箱",
  phone: "手机号",
  remark: "备注",
  createTime: "创建时间"
})

// 表标题键名
const key = Object.keys(keyNameList)

// 表格数据
const tableData = ref<userType[]>()

// 用户共有多少条
const total = ref<number>(0)

const page = ref<number>(1)

// 获取表格数据
getUserList()

// 获取用户
async function getUserList(page: number = 1, keyword?: string) {
  tableData.value = []
  const { list, pagination } = await getUserListApi(page, 10, keyword)
  tableData.value = list
  total.value = pagination.total
}

// 一行的用户信息
let userInfo = ref()

// 编辑信息弹窗
const showDig = ref(false)

// 编辑信息按钮
function changeInfo(_event: any, row: userType) {
  showDig.value = true
  userInfo.value = row ? { ...row } : undefined
  getUserList()
}

// 需要删除选择的对象
const rows = ref<userType[]>()
// 点击了删除,还没删,准备给用户确认还是取消的选项
function clickDelete(e: userType[]) {
  // 弹出取消确认提示框
  centerDialogVisible.value = true
  // 准备删除的成员id数组
  rows.value = e
}

// 删除成员
async function deleteUser() {
  centerDialogVisible.value = false
  const ids = rows.value?.map((res) => {
    return res.id
  })
  await deleteUserApi(ids!)
  getUserList()
  ElMessage({
    showClose: true,
    message: "删除成功",
    type: "success"
  })
}

// 选中的记录
const multipleSelection = ref<userType[]>([])
const handleSelectionChange = (val: userType[]) => {
  multipleSelection.value = val
}

// 搜索输入框
const inputSearch = ref("")

// 关键字搜索
function search() {
  getUserList(1, inputSearch.value)
}

// 监听输入框, 一旦为空, 则调用获取数据方法
watch(inputSearch, (newValue) => {
  if (newValue.length == 0) {
    getUserList()
  }
})

// 刷新
function flush(){
  getUserList()
  page.value = 1
  console.log(11111111111);
  
}
</script>

<style lang="scss" scoped>
$space: 15px;
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 600px;

}

:deep(.el-image__inner) {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>
